<nz-layout>
  <nz-header>
    <div class="logo"></div>
    <ul nz-menu  nzMode="horizontal">
      <li nz-menu-item nzMatchRouter [routerLink]="['/status']"><i nz-icon nzType="cluster" nzTheme="outline"></i>
        Status
      </li>
      <li nz-menu-item nzMatchRouter [routerLink]="['/KVs']"><i nz-icon nzType="file-protect" nzTheme="outline"></i>
        KVs
      </li>
      <li nz-submenu nzTitle="Settings" nzIcon="setting">
        <ul>
          <li nz-menu-item nzMatchRouter [routerLink]="['/settings','user']"><i nz-icon nzType="user"
              nzTheme="outline"></i>User Setting</li>
          <li nz-menu-item nzMatchRouter [routerLink]="['/settings','role']"><i nz-icon nzType="team"
              nzTheme="outline"></i>Role Setting</li>
        </ul>
      </li>
      <li nz-menu-item style="float:right;" (click)="switchProfile()">
        Switch Profile 
        <i nz-icon nzType="logout" nzTheme="outline" ></i>
      </li>
    </ul>
  </nz-header>
  <nz-content>
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <i nz-icon nzType="database"></i>
        {{profile}}
      </nz-breadcrumb-item>
      <nz-breadcrumb-item *ngFor="let b of breads">
        <a [routerLink]="[b.url,b.param]" *ngIf="b.url!=''"><i nz-icon [nzType]="b.icon"></i><span>{{b.name}}</span></a>
        <ng-container *ngIf="b.url==''"><i nz-icon [nzType]="b.icon" ></i><span>{{b.name}}</span></ng-container>
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <div class="inner-content">
      <router-outlet></router-outlet>
    </div>
  </nz-content>
  <nz-footer>Ant Design ©2019 Implement By Angular</nz-footer>
</nz-layout>
